<!--
 * @Author: luoyuxiang 398165@qq.com
 * @Date: 2025-03-19 16:57:34
 * @LastEditors: luoyuxiang 398165@qq.com
 * @LastEditTime: 2025-05-09 23:22:33
 * @FilePath: \formula-syn-vue\src\views\project\article\components\ArticleInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 文章详情弹窗 -->
  <el-dialog
    v-model="props.visible"
    title="详情"
    top="1vh"
    width="1050px"
    append-to-body
    @close="$emit('close')"
  >
    <el-form ref="dataFormRef" :model="formData" label-width="100px">
      <el-form-item label="文章类型" prop="articleType">
        <dict v-model="formData.articleType" code="article_type" :disabled="true" />
      </el-form-item>
      <div v-if="formData.articleType === 'AncientBook'">
        <el-form-item label="章节" prop="titleCn">
          <div v-html="formData.titleCn"></div>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <div v-html="formData.author"></div>
        </el-form-item>
        <el-form-item label="简介" prop="abstracts">
          <div v-html="formData.abstracts"></div>
        </el-form-item>
        <div class="content-section">
          <el-tabs type="border-card">
            <el-tab-pane label="简体">
              <div class="grid">
                <el-scrollbar height="calc(100vh - 480px)">
                  <div class="chapter-content" v-html="formData.contentCn"></div>
                </el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane label="繁体">
              <div class="grid">
                <el-scrollbar height="calc(100vh - 480px)">
                  <div class="chapter-content" v-html="formData.contentTc"></div>
                </el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane label="语译">
              <div class="grid">
                <el-scrollbar height="calc(100vh - 480px)">
                  <div class="chapter-content" v-html="formData.content"></div>
                </el-scrollbar>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <div v-if="formData.articleType !== 'AncientBook'">
        <el-form-item label="中文标题" prop="titleCn">
          <div v-html="formData.titleCn"></div>
        </el-form-item>
        <el-form-item label="英文标题" prop="titleEn">
          <div v-html="formData.titleEn"></div>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <div v-html="formData.author"></div>
        </el-form-item>
        <el-form-item label="摘要" prop="abstracts">
          <div v-html="formData.abstracts"></div>
        </el-form-item>
        <el-form-item label="机构" prop="organization">
          <div v-html="formData.organization"></div>
        </el-form-item>
        <el-form-item label="关键词" prop="keyWords">
          <div v-html="formData.keyWords"></div>
        </el-form-item>
        <el-form-item label="来自期刊" prop="journaName">
          <div v-html="formData.journaName"></div>
        </el-form-item>
        <el-form-item label="中图分类号" prop="clcNumber">
          <div v-html="formData.clcNumber"></div>
        </el-form-item>
        <el-form-item label="文章编号" prop="articleCode">
          <div v-html="formData.articleCode"></div>
        </el-form-item>
        <el-form-item label="DOI" prop="doi">
          <div v-html="formData.doi"></div>
        </el-form-item>
        <el-form-item label="出版年" prop="year">
          <div v-html="formData.year"></div>
        </el-form-item>
        <el-form-item label="卷" prop="volume">
          <div v-html="formData.volume"></div>
        </el-form-item>
        <el-form-item label="期" prop="number">
          <div v-html="formData.number"></div>
        </el-form-item>
        <el-form-item label="页码" prop="page">
          <div v-html="formData.page"></div>
        </el-form-item>
        <el-form-item label="原文" prop="titleCn">
          <OriginalLink :titleCn="formData.titleCn || ''" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('close')">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import ArticleAPI, { ArticlePageVO, ArticleForm, ArticlePageQuery } from "@/api/project/article";
import ArticleAncientAPI, { ArticleAncientForm } from "@/api/project/article-ancient";
import OriginalLink from "./OriginalLink.vue";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  visible: {
    type: Boolean,
    required: true,
  },
});

// 文章表单数据
const formData = reactive<ArticleForm>({});

// 监听 visible 的变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      handleQuery();
    }
  }
);
const loading = ref(false);

/** 查询文章 */
function handleQuery() {
  loading.value = true;
  ArticleAPI.getFormData(Number(props.id))
    .then((data) => {
      Object.assign(formData, data);
    })
    .finally(() => {
      loading.value = false;
    });

  /** 古籍 */
  loading.value = true;
  ArticleAncientAPI.getFormData(Number(props.id))
    .then((data) => {
      formData.contentCn = data.contentCn;
      formData.contentTc = data.contentTc;
      formData.content = data.content;
    })
    .finally(() => {
      loading.value = false;
    });
}

const dataFormRef = ref(null);
</script>
<style scoped>
/* 选中 el-form 下的所有 el-form-item，设置间距 */
.el-form .el-form-item {
  margin-bottom: 10px; /* 统一设置间距 */
}
</style>
